<template>
  <div style="height: 500px;;width: 960px">
    <e-charts auto-resize :options="report"
              style="height: 500px;width: 960px"></e-charts>
  </div>
</template>

<script>
  import {
    getAccountReport
  } from "@/api/platform/running";

  import ECharts from 'vue-echarts';

  let _self;

  require('echarts/lib/chart/line');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/legendScroll');
  export default {
    components: {ECharts},
    props: {
      platform: null,
      runningId: null,
    },
    data() {
      return {
        report: {
          tooltip: {
            confine: true,
            trigger: 'axis',
            alwaysShowContent: false,
            axisPointer: {type: 'line', lineStyle: {color: 'rgba(0, 0, 0, 0)'}},
            backgroundColor: '#355475',
            textStyle: {color: '#fff', fontSize: '14px'},
            extraCssText: 'box-shadow: 0 0 16px 0 rgba(0, 0, 0, .2);border-radius: 4px;'
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [],
            type: 'line'
          }, {
            data: [],
            type: 'line'
          }]
        }
      }
    },
    mounted() {
      _self = this;
      this.loadReport();
    },
    methods: {
      loadReport() {
        getAccountReport(this.runningId,{platform:this.platform}).then(res => {
          console.log('get report data')
          console.log(res.data.data)
          let xAxis = []
          let yQuoto = []
          let yBase = []
          res.data.forEach(item => {
            xAxis.push(item.dayStr)
            yQuoto.push(parseFloat(item.quoteTotal).toFixed(2))
            yBase.push(parseFloat(item.baseTotal).toFixed(2))
          })

          _self.report.xAxis.data = xAxis
          _self.report.series[0].data = yQuoto
          _self.report.series[1].data = yBase

        })
      }
    }
  }
</script>
